import 'package:twelve_animals/global.dart';
import 'package:twelve_animals/http-manager.dart';
import 'package:flutter/material.dart';

class MatchDetail extends StatefulWidget {
  MatchDetail({Key key, this.male, this.female}) : super(key: key);
  final String male;
  final String female;
  @override
  _MatchDetailState createState() => _MatchDetailState();
}

class _MatchDetailState extends State<MatchDetail> {
  var _matchData;
  @override
  void initState() {
    twelveAnimalsMatch(widget.male, widget.female).then((res) {
      setState(() {
        _matchData = res;
      });
    });
    super.initState();
  }

  twelveAnimalsMatch(String male, String female) async {
    String url = "/twelve_animals/match?male=$male&female=$female";
    try {
      var response = await HttpUtils.request(url, method: HttpUtils.GET);
      return response['data'];
    } catch (e) {
      print(e);
    }
  }

  List<Widget> _getGradeStar(double score, int total) {
    List<Widget> _list = List<Widget>();
    for (var i = 0; i < total; i++) {
      double factor = (score - i);
      if (factor >= 1) {
        factor = 1.0;
      } else if (factor < 0) {
        factor = 0;
      }
      Stack _st = Stack(
        children: <Widget>[
          Icon(
            Icons.star,
            color: Colors.white.withOpacity(0.9),
            size: 20,
          ),
          ClipRect(
            child: Align(
              alignment: Alignment.topLeft,
              widthFactor: factor,
              child: Icon(
                Icons.star,
                color: Global.mainDarkColor,
                size: 20,
              ),
            ),
          )
        ],
      );
      _list.add(_st);
    }
    return _list;
  }

  @override
  Widget build(BuildContext context) {
    return _matchData == null
        ? Container(
            color: Global.backgroundColor,
            child: Center(child: CircularProgressIndicator()),
          )
        : Scaffold(
            body: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              decoration: BoxDecoration(color: Global.backgroundColor),
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    Container(
                      width: MediaQuery.of(context).size.width,
                      height: Global.paddingTop + 200,
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                          colors: [
                            Global.mainColor,
                            Global.mainColor.withOpacity(0.5),
                          ],
                        ),
                      ),
                      child: Stack(
                        children: [
                          Positioned(
                            left: 0,
                            top: Global.paddingTop + 10,
                            child: Container(
                              width: MediaQuery.of(context).size.width,
                              child: Center(
                                child: Text(
                                  "生肖速配",
                                  style: TextStyle(
                                    color: Global.backgroundColor,
                                    fontSize: 22,
                                    fontWeight: FontWeight.w500,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Positioned(
                            left: 0,
                            top: Global.paddingTop + 43,
                            child: Container(
                              width: MediaQuery.of(context).size.width,
                              child: Center(
                                child: Text(
                                  "十二生肖配对爱情缘分和配对指数，提前知晓",
                                  style: TextStyle(
                                    color:
                                        Global.backgroundColor.withOpacity(0.7),
                                    fontSize: 12,
                                    fontWeight: FontWeight.w500,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Positioned(
                            left: 0,
                            right: 0,
                            top: Global.paddingTop + 75,
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                InkWell(
                                  onTap: () {
                                    Navigator.of(context).pop();
                                  },
                                  child: Container(
                                    padding: EdgeInsets.fromLTRB(15, 5, 15, 5),
                                    decoration: BoxDecoration(
                                      border: Border.all(
                                          color: Global.backgroundColor,
                                          width: 0.5),
                                      color: Global.backgroundColor
                                          .withOpacity(0.2),
                                      borderRadius: BorderRadius.circular(20),
                                    ),
                                    child: Center(
                                      child: Text(
                                        "重新匹配",
                                        style: TextStyle(
                                          color: Global.backgroundColor,
                                          fontSize: 14,
                                          fontWeight: FontWeight.w400,
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Positioned(
                            left: 0,
                            bottom: 0,
                            child: Container(
                              width: MediaQuery.of(context).size.width,
                              child: Image.asset('assets/images/cloud1.png'),
                            ),
                          ),
                          Positioned(
                            left: 0,
                            bottom: 0,
                            child: Container(
                              width: MediaQuery.of(context).size.width,
                              child: Image.asset('assets/images/cloud2.png'),
                            ),
                          ),
                          Positioned(
                            left: 0,
                            bottom: 0,
                            child: Container(
                              width: MediaQuery.of(context).size.width,
                              child: Center(
                                child: Text(
                                  _matchData['title'],
                                  style: TextStyle(
                                    color: Global.mainColor,
                                    fontSize: 20,
                                    fontWeight: FontWeight.w500,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(height: 15),
                    Container(
                      width: MediaQuery.of(context).size.width - 50,
                      height: 180,
                      child: Stack(
                        children: [
                          Positioned(
                            top: 40,
                            left: 0,
                            child: Container(
                              width: MediaQuery.of(context).size.width - 50,
                              height: 140,
                              decoration: BoxDecoration(
                                image: DecorationImage(
                                  image: AssetImage("assets/images/sx_bg.png"),
                                  repeat: ImageRepeat.repeat,
                                  fit: BoxFit.none,
                                ),
                                color: Global.mainColor,
                                borderRadius: BorderRadius.circular(8.0),
                                boxShadow: [
                                  BoxShadow(
                                    color: Global.mainColor.withOpacity(0.2),
                                    offset: Offset(0, 15),
                                    blurRadius: 15,
                                    spreadRadius: 1,
                                  )
                                ],
                              ),
                              child: Column(
                                children: [
                                  SizedBox(height: 5),
                                  Text.rich(
                                    TextSpan(
                                        text: _matchData['count'].toString(),
                                        children: [
                                          TextSpan(
                                            text: '分',
                                            style: TextStyle(
                                              color: Global.backgroundColor,
                                              fontSize: 12,
                                              fontWeight: FontWeight.w600,
                                            ),
                                          )
                                        ]),
                                    style: TextStyle(
                                      fontSize: 40,
                                      color: Global.backgroundColor,
                                      fontWeight: FontWeight.w700,
                                    ),
                                    textAlign: TextAlign.center,
                                    textDirection: TextDirection.ltr,
                                  ),
                                  Row(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Text(
                                        '“ ',
                                        style: TextStyle(
                                          fontSize: 32,
                                          color: Global.backgroundColor
                                              .withOpacity(0.5),
                                          fontWeight: FontWeight.w500,
                                        ),
                                      ),
                                      Text(
                                        _matchData['evaluation'],
                                        style: TextStyle(
                                          color: Global.backgroundColor,
                                          fontSize: 20,
                                          fontWeight: FontWeight.w500,
                                        ),
                                      ),
                                      Text(
                                        ' ”',
                                        style: TextStyle(
                                          fontSize: 32,
                                          color: Global.backgroundColor
                                              .withOpacity(0.5),
                                          fontWeight: FontWeight.w500,
                                        ),
                                      ),
                                    ],
                                  ),
                                  Text(
                                    _matchData['evaluationDesc'],
                                    style: TextStyle(
                                      color: Global.backgroundColor
                                          .withOpacity(0.7),
                                      fontSize: 14,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                          Positioned(
                            top: 0,
                            left: 0,
                            right: 0,
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Container(
                                  width: 80,
                                  height: 80,
                                  padding: EdgeInsets.all(7),
                                  decoration: BoxDecoration(
                                    gradient: LinearGradient(
                                      begin: Alignment.topCenter,
                                      end: Alignment.bottomCenter,
                                      colors: [
                                        Color(0xFFf3f9ff),
                                        Color(0xFFd1ebfd),
                                      ],
                                    ),
                                    borderRadius: BorderRadius.circular(100),
                                    boxShadow: [
                                      BoxShadow(
                                        color:
                                            Color(0xFF000000).withOpacity(0.1),
                                        offset: Offset(0, 15),
                                        blurRadius: 15,
                                        spreadRadius: 1,
                                      )
                                    ],
                                  ),
                                  child:
                                      Image.network(_matchData['maleAvatar']),
                                ),
                                SizedBox(width: 80),
                                Container(
                                  width: 80,
                                  height: 80,
                                  padding: EdgeInsets.all(7),
                                  decoration: BoxDecoration(
                                    gradient: LinearGradient(
                                      begin: Alignment.topCenter,
                                      end: Alignment.bottomCenter,
                                      colors: [
                                        Color(0xFFfff6f6),
                                        Color(0xFFffc5c5),
                                      ],
                                    ),
                                    borderRadius: BorderRadius.circular(100),
                                    boxShadow: [
                                      BoxShadow(
                                        color:
                                            Color(0xFF000000).withOpacity(0.1),
                                        offset: Offset(0, 15),
                                        blurRadius: 15,
                                        spreadRadius: 1,
                                      )
                                    ],
                                  ),
                                  child:
                                      Image.network(_matchData['femaleAvatar']),
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                    SizedBox(height: 20),
                    Text(
                      '相处建议',
                      style: TextStyle(
                        fontSize: 17,
                        fontWeight: FontWeight.w500,
                        color: Global.mainColor,
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.all(15),
                      child: Text(
                        "　　${_matchData['content']}",
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w400,
                          color: Global.fontColor,
                          height: 2.3,
                        ),
                      ),
                    ),
                    SizedBox(height: 30),
                  ],
                ),
              ),
            ),
          );
  }
}
